<script setup lang="ts">
import { ref } from 'vue'
import { wxfileTobase64 } from '@/utils/utils'
import { suggestion } from '@/package-mine/api/pay'
import user from '@/composables/user'

const typeList = ref([{
    text: '投诉',
    key: 1,
}, {
    text: '建议',
    key: 2,
}, {
    text: '故障',
    key: 3,
}, {
    text: '其他',
    key: 4,
}])
const fileList = ref([] as any)
const phone = ref('')
const type = ref(1)
const content = ref('')

function checkType(val: number) {
    type.value = val
}
async function submit() {
    if (!content.value) {
        uni.showToast({
            title: '请填写投诉内容！',
            icon: 'none',
        })
        return 0
    }
    if (phone.value !== '' && !/^1\d{10}$/.test(phone.value)) {
        uni.showToast({
            title: '请填写正确的手机号码！',
            icon: 'none',
        })
        return 0
    }
    const promiseList = []
    for (const i in fileList.value)
        promiseList.push(wxfileTobase64(fileList.value[i]))

    const result = await Promise.all(promiseList)
    await suggestion({
        type: type.value,
        userId: user.userInfo.value.userId,
        suggestion: content.value,
        phone: phone.value,
        params: {
            photos: result,
        },
    })
    await uni.showToast({
        title: '反馈成功',
        icon: 'none',
    })
    uni.switchTab({ url: '/pages/mine/mine' })
}
async function upload() {
    const result = await uni.chooseImage({
        count: 4,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
    })
    fileList.value = result.tempFilePaths
}
</script>

<template>
    <NavbarContainer nav-title="意见反馈">
        <view class="box-border min-h-100vh w-full bg-#ffffff px-30rpx py-40rpx">
            <view class="mb-30rpx text-36rpx text-#121212 font-600">问题类别</view>
            <view class="mb-30rpx box-border w-full flex items-center gap-16rpx">
                <view v-for="(item, i) in typeList" :key="i" :class="{ 'text-#ffffff bg-#FF7642': type === item.key }"
                      class="h-60rpx w-120rpx flex items-center justify-center rounded-30rpx bg-#F9F9FA"
                      @click="checkType(item.key)">
                    {{ item.text }}
                </view>
            </view>
            <textarea id="" v-model="content" name="" class="h-300rpx bg-#F9F9FA p-30rpx" placeholder-class="textarea_pl"
                      placeholder="请填写10个字以上的问题描述，以便我们能更好地帮您解决问题" maxlength="150" />
            <view class="upload">
                <image class="upload-btn" src="../../../static/images/opinion/upload.png" mode="widthFix" @click="upload" />
                <image v-for="(item, i) in fileList" :key="i" class="upload-btn" :src="item" />
                <text class="describe">
                    上传照片截图，最多传4张（选填）
                </text>
            </view>
            <view class="input-block">
                <text>联系方式</text>
                <input v-model="phone" type="text" class="bg-#F9F9FA" placeholder-class="input_pl"
                       placeholder="选填，方便我们给您反馈">
            </view>
            <view
                class="mt-60rpx box-border h-94rpx w-full flex items-center justify-center rounded-48 bg-#ff7642 text-36rpx text-#ffffff font-600"
                @click="submit">
                提交
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped lang="scss">
.upload {
    display: flex;
    align-items: flex-end;
    margin-top: 10rpx;
    flex-wrap: wrap;
}

.upload-btn {
    width: 150rpx;
    height: 150rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
    margin-top: 20rpx;
}

.describe {
    font-size: 24rpx;
    color: #A6A8AF;
    margin-left: 14rpx;
}

.input-block {
    width: 690rpx;
    height: 98rpx;
    background: #F9F9FA;
    border-radius: 8rpx;
    margin-top: 30rpx;
    color: #202536;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30rpx;
}

.textarea_pl {
    color: #A6A8AF;
    font-size: 24rpx;
}
</style>

<route lang="json">
{
    "style": {}
}
</route>
